@extends('layout.page')
@section('title','手工发奖 - 群体发奖')
@section('stylesheet')
    <link href="/css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet">
    <link href="/css/plugins/webUploader/webuploader.css" rel="stylesheet">
    <link href="/css/plugins/webUploader/style33.css" rel="stylesheet">
    <link href="/css/custom.css" rel="stylesheet">
@endsection


@section('static-page')
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-content">
                <div id="uploader">
                    <div><a id="upload-btn" class="btn btn-lg">添加文件</a></div>

                    <div>请按模板格式录入奖励信息，支持格式xls/xlsx，<a href="/common/files/download/批量发奖模板.xlsx">立即下载模板。</a></div>
                    <div><a class="btn btn-success" id="submit">提交</a></div>
                </div>
            </div>
            <div id="result" class="hidden">

                <div class="jqGrid_wrapper">
                    <table id="gift-list"></table>
                    <a class="btn btn-success" id="btn-confirm">确认</a>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('javascript')

    <script src="/js/webuploader.min.js"></script>
    <script src="/js/plugins/jqgrid/i18n/grid.locale-cn.js"></script>
    <script src="/js/plugins/jqgrid/jquery.jqGrid.min.js"></script>

    <script src="/js/common.js"></script>
    <script>
        $.jgrid.defaults.styleUI = 'Bootstrap';
        var jqgrid = new JqgridTable('#gift-list', {
            caption:"确认发奖列表",
            colNames: ['ID', '手机号', '姓名', '奖池'],
            colModel: [
                {
                    name: 'id',
                    index: 'id',
                    width: 60,
                    sorttype: "int"
                },
                {
                    name: 'user_phone',
                    index: 'user_phone',
                    width: 180,
                    sorttype: "int",
                },
                {
                    name: 'user_name',
                    index: 'user_name',
                    width: 100
                },
                {
                    name: 'package.name',
                    index: 'package.name',
                    width: 100
                }
            ],
        }, '/ceb/handgifts/multicheck', 'POST');
        $(document).ready(function () {
            var uploader = WebUploader.create({
                dnd: '#upload-btn',
                // 选完文件后，是否自动上传。
                auto: false,
                // swf文件路径
                swf: '/js/Uploader.swf',
                // 文件接收服务端。
                server: '/ceb/handgifts/multi',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                fileNumLimit: 1,
                pick: {
                    id: '#upload-btn',
                    multiple: false,
                },
                // 只允许选择图片文件。
                accept: {
                    title: 'Excel文件',
                    extensions: 'xls,xlsx',
                    mimeTypes: '.xls,.xlsx'
                },
                method: "post",
            }).on('uploadSuccess', function (file, result) {
                if (result.code == 1) {
                    jqgrid.show(result.data.list);
                    $('#result').removeClass('hidden');
                    $('#uploader').addClass('hidden');
                    $('#btn-confirm').on('click',function(){
                        toAjax('/ceb/handgifts/multicheck',{id:result.data.id},'POST')
                                .on('hxop.ajax-success',function(){
                            go_page('/ceb/handgifts/index');
                        });
                    });
                } else {
                    alert(result.message);
                }
            }).on('fileQueued', function (file) {
                console.log(file);
                $('#upload-btn').find('.webuploader-pick').html(file.name);
            }).on('uploadBeforeSend', function (object, data, headers) {
                headers['X-XSRF-TOKEN'] = $.cookie('XSRF-TOKEN');
            });

            $('#submit').on('click', function () {
                uploader.upload();
            });
        });
    </script>

@endsection